@backColor: black;
@buttonColor: #19f;
@buttonLight1: #77f;
@buttonLight2: #7f7;
@buttonLight3: #f77;
@buttonLight4: #ff7;
* {
  margin: 0;
  padding: 0;
}
.screen {
  height: 100vh;
  width: 100vw;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  border-radius: 50%;
}

.lighter-boder(@r1,@r2,@shadowColor) {
  box-shadow: 0 0 @r1 @r2 @shadowColor;
}

body {
  .screen;
  .flex-center;
  background-color: black;

  .my-button {
    .circle;
    .flex-center;
    height: 100px;
    width: 100px;
    // background-color: @buttonColor;
    cursor: pointer;
    animation: setColor 1.5s linear infinite alternate,
      zhuan 1.5s linear infinite normal;
  }
}

@keyframes setColor {
  from {
    box-shadow: 0 0 1px 1px @buttonLight1, 0 0 0px 0px @buttonLight3,
      0 0 0px 0px @buttonLight4, 0 0 2px 2px white;
  }
  to {
    box-shadow: 0 0 10px 4px @buttonLight1, 0 0 16px 10px @buttonLight3,
      0 0 24px 16px @buttonLight4, 0 0 24px 22px white;
  }
}

@keyframes zhuan {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(3600deg);
  }
}
